<template>
  <div class="game-center">
    <!-- 顶部横幅 -->
    <div class="game-banner">
      <div class="banner-content">
        <h1>🎮 学习游戏中心</h1>
        <p>通过游戏化的方式，让学习更有趣、更高效！选择您的行业，开始学习之旅</p>
      </div>
      <div class="user-stats">
        <el-statistic title="总积分" :value="userStats.totalPoints">
          <template #suffix>
            <el-icon><Trophy /></el-icon>
          </template>
        </el-statistic>
        <el-statistic title="完成游戏" :value="userStats.completedGames">
          <template #suffix>
            <el-icon><Select /></el-icon>
          </template>
        </el-statistic>
        <el-statistic title="排名" :value="userStats.ranking">
          <template #prefix>#</template>
        </el-statistic>
      </div>
    </div>

    <!-- 行业分类 -->
    <el-tabs v-model="activeIndustry" class="industry-tabs" @tab-click="handleIndustryChange">
      <el-tab-pane label="全部" name="all">
        <el-icon><Grid /></el-icon>
      </el-tab-pane>
      <el-tab-pane label="IT行业" name="it">
        <el-icon><Monitor /></el-icon>
      </el-tab-pane>
      <el-tab-pane label="零售" name="retail">
        <el-icon><ShoppingCart /></el-icon>
      </el-tab-pane>
      <el-tab-pane label="制造" name="manufacturing">
        <el-icon><SetUp /></el-icon>
      </el-tab-pane>
      <el-tab-pane label="餐饮" name="food">
        <el-icon><Food /></el-icon>
      </el-tab-pane>
      <el-tab-pane label="通用" name="general">
        <el-icon><Star /></el-icon>
      </el-tab-pane>
    </el-tabs>

    <!-- 游戏列表 -->
    <div class="games-grid">
      <div 
        v-for="game in filteredGames" 
        :key="game.id" 
        class="game-card"
        :class="{ locked: game.locked }"
        @click="!game.locked && playGame(game)"
      >
        <div class="game-icon" :style="{ background: game.color }">
          <component :is="game.icon" class="icon" />
        </div>
        <div class="game-info">
          <h3>{{ game.name }}</h3>
          <p>{{ game.description }}</p>
          <div class="game-meta">
            <el-tag :type="game.difficulty === '简单' ? 'success' : game.difficulty === '中等' ? 'warning' : 'danger'" size="small">
              {{ game.difficulty }}
            </el-tag>
            <span class="players">
              <el-icon><User /></el-icon>
              {{ game.players }} 人玩过
            </span>
            <span class="points">
              <el-icon><Trophy /></el-icon>
              {{ game.points }} 积分
            </span>
          </div>
          <div class="game-progress" v-if="game.progress > 0">
            <el-progress :percentage="game.progress" :color="game.color" />
          </div>
        </div>
        <el-button 
          v-if="!game.locked" 
          type="primary" 
          :icon="game.progress > 0 ? 'VideoPlay' : 'CaretRight'" 
          class="play-btn"
          @click.stop="playGame(game)"
        >
          {{ game.progress > 0 ? '继续游戏' : '开始游戏' }}
        </el-button>
        <div v-else class="locked-overlay">
          <el-icon class="lock-icon"><Lock /></el-icon>
          <span>完成前置任务解锁</span>
        </div>
        <el-badge v-if="game.isNew" value="NEW" class="new-badge" />
        <el-badge v-if="game.isHot" value="HOT" class="hot-badge" />
      </div>
    </div>

    <!-- 每日挑战 -->
    <div class="daily-challenge">
      <h2>
        <el-icon><Calendar /></el-icon>
        每日挑战
      </h2>
      <div class="challenge-card">
        <div class="challenge-info">
          <h3>{{ dailyChallenge.title }}</h3>
          <p>{{ dailyChallenge.description }}</p>
          <div class="challenge-reward">
            <el-tag type="warning" size="large">
              <el-icon><Trophy /></el-icon>
              完成可获得 {{ dailyChallenge.reward }} 积分
            </el-tag>
          </div>
        </div>
        <div class="challenge-action">
          <el-progress type="circle" :percentage="dailyChallenge.progress" :width="100" />
          <el-button type="primary" size="large" @click="startDailyChallenge">
            {{ dailyChallenge.progress > 0 ? '继续挑战' : '开始挑战' }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 排行榜预览 -->
    <div class="leaderboard-preview">
      <div class="section-header">
        <h2>
          <el-icon><TrendCharts /></el-icon>
          本周排行榜
        </h2>
        <el-button text type="primary" @click="viewFullLeaderboard">
          查看完整榜单
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </div>
      <div class="top-players">
        <div v-for="(player, index) in topPlayers" :key="player.id" class="player-card" :class="`rank-${index + 1}`">
          <div class="rank-badge">{{ index + 1 }}</div>
          <el-avatar :src="player.avatar" :size="50" />
          <div class="player-info">
            <h4>{{ player.name }}</h4>
            <p>{{ player.department }}</p>
          </div>
          <div class="player-stats">
            <div class="stat">
              <el-icon><Trophy /></el-icon>
              {{ player.points }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Grid, Monitor, ShoppingCart, SetUp, Food, Star,
  Trophy, Select, User, Lock, Calendar, TrendCharts,
  ArrowRight, CaretRight, VideoPlay, Money, Box, Memo, Connection,
  Clock, WarningFilled, MagicStick, Avatar, PriceTag, Promotion, StarFilled,
  ChatDotSquare, Aim
} from '@element-plus/icons-vue'

const router = useRouter()

// 用户统计数据
const userStats = ref({
  totalPoints: 1850,
  completedGames: 12,
  ranking: 8
})

// 当前选择的行业
const activeIndustry = ref('all')

// 游戏列表数据
const games = ref([
  // IT行业游戏
  {
    id: 1,
    name: '编程挑战赛',
    description: '通过编写代码解决实际问题，提升编程能力',
    industry: 'it',
    difficulty: '中等',
    players: 2345,
    points: 100,
    progress: 60,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: 'Monitor',
    isNew: true,
    locked: false,
    route: '/learning/games/coding-challenge'
  },
  {
    id: 2,
    name: '代码调试大师',
    description: '找出代码中的Bug，训练调试技能',
    industry: 'it',
    difficulty: '简单',
    players: 1890,
    points: 80,
    progress: 30,
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    icon: 'SetUp',
    isHot: true,
    locked: false,
    route: '/learning/games/debug-master'
  },
  {
    id: 3,
    name: '算法解谜',
    description: '通过解谜游戏学习常用算法和数据结构',
    industry: 'it',
    difficulty: '困难',
    players: 1234,
    points: 150,
    progress: 0,
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    icon: 'Grid',
    isNew: true,
    locked: false,
    route: '/learning/games/algorithm-puzzle'
  },
  // 零售行业游戏
  {
    id: 4,
    name: '客户服务模拟',
    description: '模拟真实客户服务场景，提升沟通技巧',
    industry: 'retail',
    difficulty: '简单',
    players: 3456,
    points: 90,
    progress: 45,
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    icon: 'User',
    isHot: true,
    locked: false,
    route: '/learning/games/customer-service'
  },
  {
    id: 5,
    name: '销售技巧训练',
    description: '通过情景模拟提升销售话术和技巧',
    industry: 'retail',
    difficulty: '中等',
    players: 2890,
    points: 110,
    progress: 0,
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    icon: 'ShoppingCart',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/sales-training'
  },
  // 制造业游戏
  {
    id: 6,
    name: '生产流程模拟',
    description: '模拟生产线流程，优化生产效率',
    industry: 'manufacturing',
    difficulty: '中等',
    players: 1567,
    points: 120,
    progress: 20,
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    icon: 'SetUp',
    locked: false,
    route: '/learning/games/production-simulation'
  },
  {
    id: 7,
    name: '质量控制挑战',
    description: '识别产品质量问题，提升质检能力',
    industry: 'manufacturing',
    difficulty: '困难',
    players: 1123,
    points: 140,
    progress: 0,
    color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    icon: 'Select',
    isNew: true,
    locked: false,
    route: '/learning/games/quality-control'
  },
  // 餐饮业游戏
  {
    id: 8,
    name: '点餐服务游戏',
    description: '快速准确地处理客人点餐，提升服务效率',
    industry: 'food',
    difficulty: '简单',
    players: 4567,
    points: 85,
    progress: 75,
    color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    icon: 'Food',
    isHot: true,
    locked: false,
    route: '/learning/games/order-taking'
  },
  {
    id: 9,
    name: '食品安全知识竞赛',
    description: '学习食品安全知识，保障顾客健康',
    industry: 'food',
    difficulty: '中等',
    players: 2345,
    points: 95,
    progress: 0,
    color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    icon: 'Star',
    isNew: true,
    locked: false,
    route: '/learning/games/food-safety'
  },
  // 通用游戏
  {
    id: 10,
    name: '知识问答大赛',
    description: '各行业通用知识竞赛，挑战你的知识储备',
    industry: 'general',
    difficulty: '简单',
    players: 8901,
    points: 75,
    progress: 50,
    color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
    icon: 'Star',
    isNew: true,
    locked: false,
    route: '/learning/games/quiz-challenge'
  },
  {
    id: 11,
    name: '团队协作对战',
    description: '组队完成任务，培养团队协作能力',
    industry: 'general',
    difficulty: '中等',
    players: 5432,
    points: 130,
    progress: 0,
    color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)',
    icon: 'User',
    isHot: true,
    locked: false,
    route: '/learning/games/team-battle'
  },
  // 新增游戏
  {
    id: 12,
    name: '财务分析大师',
    description: '分析财务报表，做出正确的财务决策',
    industry: 'general',
    difficulty: '中等',
    players: 1567,
    points: 120,
    progress: 0,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: 'Money',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/finance-analysis'
  },
  {
    id: 13,
    name: '库存管理模拟',
    description: '合理管理库存，降低成本，提高周转率',
    industry: 'retail',
    difficulty: '中等',
    players: 1234,
    points: 130,
    progress: 0,
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    icon: 'Box',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/inventory-management'
  },
  {
    id: 14,
    name: '项目管理实战',
    description: '规划项目，管理资源，按时交付高质量成果',
    industry: 'general',
    difficulty: '困难',
    players: 2345,
    points: 150,
    progress: 0,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: 'Memo',
    isNew: true,
    locked: false,
    route: '/learning/games/project-management'
  },
  {
    id: 15,
    name: '数据分析挑战',
    description: '通过数据分析找出隐藏的商业洞察',
    industry: 'it',
    difficulty: '中等',
    players: 1890,
    points: 110,
    progress: 0,
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    icon: 'TrendCharts',
    isNew: true,
    locked: false,
    route: '/learning/games/data-analysis'
  },
  {
    id: 16,
    name: '商务谈判模拟',
    description: '掌握谈判技巧，达成双赢协议',
    industry: 'general',
    difficulty: '中等',
    players: 3456,
    points: 125,
    progress: 0,
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    icon: 'User',
    isNew: true,
    locked: false,
    route: '/learning/games/business-negotiation'
  },
  {
    id: 17,
    name: '供应链优化',
    description: '优化供应链流程，降低成本，提高效率',
    industry: 'manufacturing',
    difficulty: '困难',
    players: 1678,
    points: 145,
    progress: 0,
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    icon: 'Connection',
    isNew: true,
    locked: false,
    route: '/learning/games/supply-chain-optimization'
  },
  // 创意游戏
  {
    id: 18,
    name: '时间管理大师',
    description: '合理安排一天的工作，在有限时间内完成最多价值的任务',
    industry: 'general',
    difficulty: '中等',
    players: 2890,
    points: 140,
    progress: 0,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: 'Clock',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/time-management'
  },
  {
    id: 19,
    name: '危机处理专家',
    description: '在危机中做出正确决策，挽救公司声誉和业绩',
    industry: 'general',
    difficulty: '困难',
    players: 1567,
    points: 160,
    progress: 0,
    color: 'linear-gradient(135deg, #f56c6c 0%, #ef5350 100%)',
    icon: 'WarningFilled',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/crisis-management'
  },
  {
    id: 20,
    name: '创新工坊',
    description: '发挥创意，设计创新产品',
    industry: 'general',
    difficulty: '中等',
    players: 2345,
    points: 130,
    progress: 0,
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    icon: 'MagicStick',
    isNew: true,
    locked: false,
    route: '/learning/games/innovation-workshop'
  },
  {
    id: 21,
    name: '客户画像师',
    description: '分析客户数据，构建精准用户画像',
    industry: 'retail',
    difficulty: '中等',
    players: 1890,
    points: 120,
    progress: 0,
    color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
    icon: 'Avatar',
    isNew: true,
    locked: false,
    route: '/learning/games/customer-profiling'
  },
  {
    id: 22,
    name: '成本优化挑战',
    description: '在不影响质量的前提下降低成本',
    industry: 'general',
    difficulty: '中等',
    players: 2123,
    points: 135,
    progress: 0,
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    icon: 'PriceTag',
    isNew: true,
    locked: false,
    route: '/learning/games/cost-optimization'
  },
  // 最新创意游戏
  {
    id: 23,
    name: '商业模式画布',
    description: '设计创新商业模式，打造可持续发展的企业',
    industry: 'general',
    difficulty: '困难',
    players: 1890,
    points: 180,
    progress: 0,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: 'Grid',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/business-model-canvas'
  },
  {
    id: 24,
    name: '团队建设挑战',
    description: '培养团队协作技能，打造高效团队',
    industry: 'general',
    difficulty: '中等',
    players: 2456,
    points: 140,
    progress: 0,
    color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
    icon: 'User',
    isNew: true,
    locked: false,
    route: '/learning/games/team-building'
  },
  {
    id: 25,
    name: '市场营销策略',
    description: '制定营销策略，提升品牌影响力',
    industry: 'retail',
    difficulty: '中等',
    players: 2789,
    points: 150,
    progress: 0,
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    icon: 'Promotion',
    isNew: true,
    locked: false,
    route: '/learning/games/marketing-strategy'
  },
  {
    id: 26,
    name: '数字化转型',
    description: '引领企业数字化转型，提升竞争力',
    industry: 'it',
    difficulty: '困难',
    players: 1567,
    points: 170,
    progress: 0,
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    icon: 'Connection',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/digital-transformation'
  },
  {
    id: 27,
    name: '领导力发展',
    description: '提升领导力技能，成为优秀管理者',
    industry: 'general',
    difficulty: '困难',
    players: 2134,
    points: 160,
    progress: 0,
    color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    icon: 'StarFilled',
    isNew: true,
    locked: false,
    route: '/learning/games/leadership-development'
  },
  // 高级创意游戏
  {
    id: 28,
    name: '商业决策模拟器',
    description: '在复杂商业环境中做出最优决策',
    industry: 'general',
    difficulty: '困难',
    players: 1678,
    points: 200,
    progress: 0,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: 'TrendCharts',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/business-decision-simulator'
  },
  {
    id: 29,
    name: '产品设计工坊',
    description: '从0到1设计创新产品',
    industry: 'it',
    difficulty: '中等',
    players: 2345,
    points: 150,
    progress: 0,
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    icon: 'Grid',
    isNew: true,
    locked: false,
    route: '/learning/games/product-design-workshop'
  },
  {
    id: 30,
    name: '资源分配大师',
    description: '优化资源配置，实现效益最大化',
    industry: 'general',
    difficulty: '中等',
    players: 1998,
    points: 145,
    progress: 0,
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    icon: 'Connection',
    isNew: true,
    locked: false,
    route: '/learning/games/resource-allocation'
  },
  {
    id: 31,
    name: '风险管理挑战',
    description: '识别、评估和应对各类风险',
    industry: 'general',
    difficulty: '困难',
    players: 1567,
    points: 175,
    progress: 0,
    color: 'linear-gradient(135deg, #ff6b6b 0%, #feca57 100%)',
    icon: 'WarningFilled',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/risk-management'
  },
  {
    id: 32,
    name: '客户体验设计',
    description: '优化客户旅程，提升用户满意度',
    industry: 'retail',
    difficulty: '中等',
    players: 2234,
    points: 140,
    progress: 0,
    color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    icon: 'User',
    isNew: true,
    locked: false,
    route: '/learning/games/customer-experience-design'
  },
  // 专业技能游戏
  {
    id: 33,
    name: '价格策略模拟',
    description: '制定最优定价策略，实现利润最大化',
    industry: 'retail',
    difficulty: '困难',
    players: 1823,
    points: 190,
    progress: 0,
    color: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
    icon: 'PriceTag',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/pricing-strategy'
  },
  {
    id: 34,
    name: '竞品分析挑战',
    description: '深入分析竞争对手，制定竞争策略',
    industry: 'general',
    difficulty: '中等',
    players: 1956,
    points: 155,
    progress: 0,
    color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)',
    icon: 'TrendCharts',
    isNew: true,
    locked: false,
    route: '/learning/games/competitor-analysis'
  },
  {
    id: 35,
    name: '精益创业模拟',
    description: 'MVP开发与快速迭代',
    industry: 'it',
    difficulty: '中等',
    players: 2145,
    points: 165,
    progress: 0,
    color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    icon: 'Star',
    isNew: true,
    locked: false,
    route: '/learning/games/lean-startup'
  },
  {
    id: 36,
    name: '职场沟通大师',
    description: '提升沟通技巧，建立良好关系',
    industry: 'general',
    difficulty: '简单',
    players: 3012,
    points: 120,
    progress: 0,
    color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    icon: 'ChatDotSquare',
    isNew: true,
    locked: false,
    route: '/learning/games/communication-master'
  },
  {
    id: 37,
    name: '战略规划师',
    description: '制定企业战略，引领未来发展',
    industry: 'general',
    difficulty: '困难',
    players: 1634,
    points: 185,
    progress: 0,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: 'Aim',
    isNew: true,
    isHot: true,
    locked: false,
    route: '/learning/games/strategy-planner'
  }
])

// 每日挑战
const dailyChallenge = ref({
  title: 'IT知识快问快答',
  description: '完成20道IT相关知识问题，限时10分钟',
  reward: 200,
  progress: 0
})

// 排行榜Top 3
const topPlayers = ref([
  {
    id: 1,
    name: '张三',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    department: '技术部',
    points: 3250
  },
  {
    id: 2,
    name: '李四',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    department: '产品部',
    points: 2890
  },
  {
    id: 3,
    name: '王五',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    department: '运营部',
    points: 2650
  }
])

// 过滤游戏
const filteredGames = computed(() => {
  if (activeIndustry.value === 'all') {
    return games.value
  }
  return games.value.filter(game => game.industry === activeIndustry.value)
})

// 切换行业
const handleIndustryChange = () => {
  ElMessage.info(`切换到${activeIndustry.value === 'all' ? '全部' : activeIndustry.value}游戏`)
}

// 开始游戏
const playGame = (game) => {
  ElMessage.success(`正在启动游戏：${game.name}`)
  setTimeout(() => {
    router.push(game.route)
  }, 500)
}

// 开始每日挑战
const startDailyChallenge = () => {
  router.push('/learning/games/daily-challenge')
}

// 查看完整排行榜
const viewFullLeaderboard = () => {
  router.push('/learning/rankings')
}

onMounted(() => {
  ElMessage.success('欢迎来到学习游戏中心！🎮')
})
</script>

<style scoped>
.game-center {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 顶部横幅 */
.game-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 40px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.banner-content h1 {
  margin: 0 0 10px 0;
  font-size: 32px;
  font-weight: bold;
}

.banner-content p {
  margin: 0;
  font-size: 16px;
  opacity: 0.95;
}

.user-stats {
  display: flex;
  gap: 40px;
}

.user-stats :deep(.el-statistic__head) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.user-stats :deep(.el-statistic__content) {
  color: white;
  font-size: 28px;
  font-weight: bold;
}

/* 行业分类 */
.industry-tabs {
  margin-bottom: 30px;
}

.industry-tabs :deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
}

/* 游戏网格 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.game-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 20px;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.game-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.game-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.game-icon .icon {
  font-size: 40px;
  color: white;
}

.game-info {
  flex: 1;
  min-width: 0;
}

.game-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #303133;
}

.game-info p {
  margin: 0 0 12px 0;
  color: #909399;
  font-size: 14px;
  line-height: 1.5;
}

.game-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.game-meta .players,
.game-meta .points {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 13px;
}

.game-progress {
  margin-top: 12px;
}

.play-btn {
  align-self: flex-start;
  margin-top: 8px;
}

.locked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lock-icon {
  font-size: 32px;
  color: #909399;
}

.new-badge, .hot-badge {
  position: absolute;
  top: 16px;
  right: 16px;
}

.hot-badge {
  right: 70px;
}

/* 每日挑战 */
.daily-challenge {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
}

.daily-challenge h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  color: #c7254e;
}

.challenge-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.challenge-info {
  flex: 1;
}

.challenge-info h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #303133;
}

.challenge-info p {
  margin: 0 0 16px 0;
  color: #606266;
}

.challenge-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* 排行榜预览 */
.leaderboard-preview {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #303133;
}

.top-players {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.player-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: all 0.3s ease;
}

.player-card:hover {
  transform: translateY(-4px);
}

.player-card.rank-1 {
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
  color: white;
  transform: scale(1.05);
}

.player-card.rank-2 {
  background: linear-gradient(135deg, #d7d2cc 0%, #304352 100%);
  color: white;
}

.player-card.rank-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
  color: white;
}

.rank-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  color: #303133;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.player-card.rank-1 .rank-badge {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
}

.player-card.rank-2 .rank-badge {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
}

.player-card.rank-3 .rank-badge {
  background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
}

.player-info {
  text-align: center;
}

.player-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
}

.player-info p {
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
}

.player-stats .stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .game-banner {
    flex-direction: column;
    gap: 20px;
  }
  
  .games-grid {
    grid-template-columns: 1fr;
  }
  
  .top-players {
    grid-template-columns: 1fr;
  }
  
  .challenge-card {
    flex-direction: column;
  }
}
</style>

